﻿<template>
  <section class="recipes-view">
    <header>
      <h2>低 GI 营养食谱库</h2>
      <p>覆盖早餐、午餐、晚餐与加餐场景，配有食材用量与制作重点。</p>
    </header>
    <ElRow :gutter="20">
      <ElCol
        v-for="recipe in recipes"
        :key="recipe.id"
        :xs="24"
        :sm="12"
        :lg="8"
      >
        <ElCard shadow="hover" class="recipe-card">
          <img :src="recipe.image" :alt="recipe.name" class="recipe-cover" />
          <div class="card-body">
            <h3>{{ recipe.name }}</h3>
            <p class="calories">{{ recipe.calories }} kcal</p>
            <div class="tags">
              <ElTag v-for="tag in recipe.tags" :key="tag" type="success">
                {{ tag }}
              </ElTag>
            </div>
            <ul class="ingredients">
              <li v-for="ingredient in recipe.ingredients" :key="ingredient.name">
                {{ ingredient.name }} · {{ ingredient.amount }}
              </li>
            </ul>
            <p class="method">{{ recipe.method }}</p>
          </div>
        </ElCard>
      </ElCol>
    </ElRow>
  </section>
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia";
import { ElCard, ElRow, ElCol, ElTag } from "element-plus";
import { useContentStore } from "../stores/content";

const contentStore = useContentStore();
const { recipes } = storeToRefs(contentStore);
</script>

<style scoped>
.recipes-view {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.recipe-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.recipe-cover {
  border-radius: 12px;
  margin-bottom: 12px;
  height: 180px;
  object-fit: cover;
  width: 100%;
}

.card-body h3 {
  margin: 0 0 6px;
}

.calories {
  color: var(--mint-primary-dark);
  font-weight: 600;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.ingredients {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  color: var(--mint-text-muted);
}

.ingredients li + li {
  margin-top: 6px;
}

.method {
  color: var(--mint-text-muted);
  line-height: 1.6;
}
</style>
